<template>
            <div class="Content_block" v-for="(item, index) in content_block" :key="index">
            <div class="Content_block_l">
              <div class="Content_block_text">{{ item.content_text }}</div>
              <div class="Content_block_main">{{ item.content_main }}</div>
              <div class="Content_block_data">
                <div>{{ item.content_name }}</div>
                <div>{{ item.content_look }}</div>
                <div>{{ item.content_good }}</div>
              </div>
            </div>
            <div class="Content_block_r"><img :src="getAssetsFile(item.content_images as string)" alt=""></div>
          </div>
</template>

<script setup lang='ts'>
import { reactive } from 'vue';
import { getAssetsFile } from '@/util/utils';
interface Content_block {
  content_text: string
  content_main: string
  content_name: string
  content_look: string
  content_good: number
  content_skill1: string
  content_skill2?: string
  content_skill3?: string
  content_images?: string
}

const content_block: Content_block[] = reactive([
  {
    content_text: '这是一段标题占位字段~',
    content_main: '这是很长很长一段内容占位文字。这是很长很长一段内容占位文字。这是很长很长一段内容占位文字。这是很长很长一段内容占位文字。',
    content_name: '作者名字',
    content_look: '6.6k',
    content_good: 99,
    content_skill1: '前端',
    content_skill2: '程序员',
    content_skill3: '占位字段',
    content_images: '1.jpg',
  },
])
</script>

<style>

</style>
